<template>
	<view>
		<u-cell-item :arrow="false" :border-bottom="false">
			<view slot='icon'>
				<u-icon name='kefu-ermai' size="35" color="#3C97FF"></u-icon>
			</view>
			<view slot='title' style="margin-left: 20rpx">
				客服电话:{{kfTel}}
			</view>
			<u-button plain type="primary" size="mini" slot="right-icon" @click='kfcall'>
				联系客服
			</u-button>
		</u-cell-item>

		<u-gap height="5" bg-color="#f1f1f1"></u-gap>


		<view class="u-padding-30 u-border-bottom">
			<view class="u-font-30 u-font-weight">{{detail.title}}</view>
			<view class="u-type-info u-margin-top-20">发布时间:{{detail.createTime}}</view>
		</view>

		<view class="u-padding-30 u-border-bottom u-flex u-row-between">
			<view class="u-flex">
				<view>
					<u-image :src="detail.headimg" width="100" height="100" shape="circle"></u-image>
				</view>
				<view class="u-margin-left-20">
					<view>{{detail.nickname}}</view>
					<view class="u-margin-top-10 u-type-info ">{{detail.phone}}</view>
				</view>
			</view>

			<view>
				<u-button plain type="primary" size="mini" slot="right-icon" @click='call'>
					拨打电话
				</u-button>
			</view>

		</view>


		<view class="u-padding-30 u-border-bottom">
			<view class="u-font-weight">项目介绍:</view>
			<view class="u-type-info u-margin-top-10">{{detail.content}}</view>
		</view>

		<view class="u-padding-30 u-border-bottom">
			<view class="u-font-weight">项目地址:</view>
			<view class="u-type-info u-margin-top-10">{{detail.province}}{{detail.city}}</view>
		</view>



		<view class="u-flex u-padding-20 controls u-border-top" >
			<view class="u-flex u-flex-1 u-row-around u-text-center">
				<view @click="collect">
					<view>
						<u-icon :name="detail.collectCount?'heart-fill':'heart'" size="40" :color="detail.collectCount?'#FF1F1F':'#333'"></u-icon>
					</view>
					<view >
						收藏
					</view>
				</view>
				<view  style="position: relative;">
					<button open-type="share" class="custom-btn"></button>
					<view>
						<u-icon name="zhuanfa" size="40" ></u-icon>
					</view>
					<view>
						分享
					</view>
				</view>
			</view>

			<view class="u-flex-2  ">
				<button class="concat" @click="call">
					<u-icon name="phone-fill"></u-icon>
					<text class="u-margin-left-20">拨打电话</text>
				</button>
			</view>

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				detail: "",
				kfTel: ""
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;
				this.jobDetail()
			}
			this.getConfig()
		},
		methods: {
			collect(){
				this.$u.post('/user/collect',{
					id:this.id
				}).then(res => {
					
					this.jobDetail()
				}).catch(err => {
				    
				})
				
			},
			call(){
				
				this.$u.post('/user/contactJob',{
					id:this.id
				}).then(res => {
					uni.makePhoneCall({
						phoneNumber:res
					})
				}).catch(err => {
				    setTimeout(()=>{
				    	uni.navigateTo({
				    		url:'/pages/myIntegral/recharge'
				    	})
				    },1500)
				    return
				})
				
				
			},
			kfcall() {
				uni.makePhoneCall({
					phoneNumber: this.kfTel
				})
			},
			getConfig() {
				this.$u.api.getConfig().then(res => {
					this.kfTel = res.kfTel;
				})
			},
			jobDetail() {
				this.$u.post('/index/jobDetail', {
					id: this.id
				}).then(res => {
					this.detail = res;
				}).catch(err => {})

			}
		},
	}
</script>

<style>
	.concat {
		background: linear-gradient(180deg, #0D64E2 0%, #2E84F6 100%) !important;
		color: #fff;
		font-size: 28rpx;
		border-radius: 40rpx;
		width: 80%;
		margin: auto;
	}
	
	.controls{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		
	}
</style>
